<template>
  <div>
    <program-add
      v-if="showAddProgram"
      :area-zone="activeZone"
      :program-id="programId"
      :shop-total-area="shopTotalArea"
      :init-programs="selectedPrograms"
      :visible.sync="showAddProgram"
      @selectprograms="selectPrograms"
    />
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item
        v-for="(item,index) in newAreaSpecialZone"
        v-show="format(item.areatitle)"
        :key="index"
        :name="index"
      >
        <template slot="title">
          <span style="font-weight:bold">{{ format(item.areatitle) }}
            <span style="color:#999">(申请面积--{{ getAreaData(item.areatitle) }}㎡)</span>
          </span>
          <el-button
            type="text"
            icon="el-icon-circle-plus-outline"
            @click.stop="showSelectProgram(item,index)"
          >选择方案</el-button>
        </template>
        <!-- 橱柜 -->
        <el-table
          v-if="item.areatitle==='Q003'"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          show-overflow-tooltip
          border
          style="width: 100%"
          :data="handleFormat(item.selectedPrograms)"
          :span-method="spanMethod3"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" fixed width="50" label="序号" />
          <el-table-column prop="spaceName" fixed label="所属空间" />
          <el-table-column prop="suitDesignWay" width="150" label="适用设计方式">
            <template slot-scope="scope">{{ formaterData(applyWayOptions,scope.row.suitDesignWay) }}</template>
          </el-table-column>
          <!-- <el-table-column prop="currentApplyDesignWay" label="">
            <template slot="header">
              <span style="color: red">*</span>本次申请设计方式
            </template>
            <template slot-scope="scope">{{ formaterData(applyWayOptions, scope.row.currentApplyDesignWay) }}</template>
          </el-table-column> -->
          <el-table-column width="150" show-overflow-tooltip prop="spaceDesc" label="空间说明" />
          <!-- <el-table-column prop="enable" label="启用状态" /> -->
          <el-table-column prop="adviceSampleArea" label="建议上样面积" />
          <el-table-column prop="actualReportArea" label="实际报图面积" />

          <el-table-column prop="styleName" width="120" label="所属专区" />
          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="sampleRecommendLevel" label="上样推荐层级">
            <template slot-scope="scope">{{ formaterData(sampleRecommendLevelOptions,scope.row.sampleRecommendLevel) }}</template>
          </el-table-column>
          <!-- <el-table-column prop="recommendFirstDesignWay" label="推荐首选上样方式">
            <template slot-scope="scope">{{ formaterData(applyWayOptions,scope.row.recommendFirstDesignWay) }}</template>
          </el-table-column>
          <el-table-column prop="recommendSecondDesignWay" label="推荐次选上样方式">
            <template slot-scope="scope">{{ formaterData(applyWayOptions,scope.row.recommendSecondDesignWay) }}</template>
          </el-table-column>

          <el-table-column prop="actualApplySampleWay" label="实际上样方式" min-width="100">
            <template slot="header">
              <span style="color: red">*</span>实际上样方式
            </template>
            <template slot-scope="scope">{{ formaterData(applyWayOptions,scope.row.actualApplySampleWay) }}</template>

          </el-table-column> -->
          <el-table-column prop="material" label="材质" />
          <el-table-column prop="marketPosition" label="市场定位">
            <template slot-scope="scope">{{ formaterData(marketPositionOption,scope.row.marketPosition) }}</template>
          </el-table-column>
          <el-table-column prop="sampleCode" label="样品编码" />
          <el-table-column prop="styleForm" label="款式形态">
            <template slot-scope="scope">{{ formaterData(styleFormOption,scope.row.styleForm) }}</template>
          </el-table-column>

          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="recommendLevel" label="系列推荐级别">
            <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
          </el-table-column>
          <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
          <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 套房 -->
        <el-table
          v-if="item.areatitle==='Q015'"
          ref="refProductTable"
          show-overflow-tooltip
          :data="handleFormat(item.selectedPrograms)"
          :span-method="spanMethod2"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="spaceName" label="所属空间" />
          <el-table-column width="150" show-overflow-tooltip prop="spaceDesc" label="空间说明" />

          <el-table-column prop="adviceSampleArea" label="建议上样面积" />
          <el-table-column prop="spaceReportArea" label="实际报图面积汇总" />

          <el-table-column prop="styleName" width="120" label="所属专区" />
          <el-table-column prop="adviceArea" label="建议面积" />
          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="actualReportArea" label="实际报图面积(㎡)" min-width="100">
            <template slot="header">
              <span style="color: red">*</span>实际报图面积(㎡)
            </template>
            <!-- <template slot-scope="scope">
              <el-input v-model.number="scope.row.actualReportArea" class="tool-inp" size="mini" placeholder="请输入面积" @input="changeAreaSum" />
            </template> -->
          </el-table-column>
          <el-table-column prop="chooseCustomizedSeriesName" label="配套定制系列" min-width="100" />
          <el-table-column prop="chooseCupboardSeriesName" label="配套橱柜系列" min-width="100" />
          <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="enable" label="启用状态">
            <template slot-scope="scope">{{ scope.row.enable===1?'启用':'停用' }}</template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>

        <!-- 全屋定制 -->
        <el-table
          v-if="item.areatitle==='Q002'"
          show-overflow-tooltip
          :data="handleFormat(item.selectedPrograms)"
          :span-method="spanMethod2"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" fixed width="50" label="序号" />
          <el-table-column prop="spaceName" fixed label="所属空间" />
          <el-table-column width="150" prop="spaceDesc" show-overflow-tooltip label="空间说明" />
          <!-- <el-table-column prop="enable" label="启用状态" /> -->
          <el-table-column prop="adviceSampleArea" label="建议上样面积" />
          <el-table-column prop="actualReportArea" label="实际报图面积">
            <template slot="header">
              <span style="color: red">*</span>实际报图面积(㎡)
            </template>
          </el-table-column>
          <el-table-column prop="styleName" width="120" label="所属专区" />
          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="assortEndProductSeriesName" label="配套成品系列" />
          <el-table-column prop="cabinetColorName" label="柜体颜色" />
          <el-table-column prop="doorColorName" label="门板颜色" />

          <el-table-column prop="adviceFirstSampleSpace" label="推荐首选上样空间">
            <template slot-scope="scope">{{ formaterData(sampleSpaceOptions,scope.row.adviceFirstSampleSpace) }}</template>
          </el-table-column>
          <el-table-column prop="adviceSecondSampleSpace" label="推荐次选上样空间">
            <template slot-scope="scope">{{ formaterData(sampleSpaceOptions,scope.row.adviceSecondSampleSpace) }}</template>
          </el-table-column>

          <el-table-column prop="actureApplySampleSpace" label="实际申请上样空间" min-width="100">
            <template slot="header">
              <span style="color: red">*</span>实际申请上样空间
            </template>
            <template slot-scope="scope">{{ formaterData(sampleSpaceOptions,scope.row.actureApplySampleSpace) }}</template>

          </el-table-column>
          <el-table-column prop="recommendLevel" label="系列推荐级别">
            <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
          </el-table-column>
          <el-table-column prop="standardColor" width="150" show-overflow-tooltip label="系列标配色">
            <template slot-scope="scope">{{ scope.row.standardColor||scope.row.seriesStandardColor }}</template>
          </el-table-column>
          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />

          <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 卫浴 -->
        <el-table
          v-if="item.areatitle==='Q004'"
          show-overflow-tooltip
          :data="handleFormat(item.selectedPrograms)"
          :span-method="spanMethod2"
          border
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="spaceName" label="所属空间" />
          <el-table-column width="150" show-overflow-tooltip prop="spaceDesc" label="空间说明" />
          <!-- <el-table-column prop="enable" label="启用状态" /> -->
          <el-table-column prop="adviceSampleArea" label="建议上样面积" />
          <el-table-column prop="spaceReportArea" label="实际报图面积汇总" />
          <el-table-column prop="suitDesignWay" label="适用设计方式">
            <template slot-scope="scope">{{ formaterData(applyWayOptions, scope.row.suitDesignWay) }}</template>
          </el-table-column>
          <el-table-column prop="adviceArea" label="建议面积(㎡)" />
          <el-table-column prop="styleName" width="120" label="所属专区" />
          <el-table-column prop="seriesName" label="产品系列" min-width="100" show-overflow-tooltip>
            <el-table-column prop="actualReportArea" label="实际申请面积(㎡)" min-width="100">
              <template slot="header">
                <span style="color: red">*</span>实际申请面积(㎡)
              </template>
            <!-- <template slot-scope="scope">
              <el-input  v-model.number="scope.row.actualReportArea" class="tool-inp" size="mini" placeholder="请输入面积" @input="changeAreaSum" />
            </template> -->
            </el-table-column>
            <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="说明" />
            <el-table-column prop="isMustUp" label="是否必上">
              <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
            </el-table-column>
            <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
          </el-table-column></el-table>
        <!-- 样板间 -->
        <el-table
          v-if="item.areatitle==='Q005'"
          show-overflow-tooltip
          :data="handleFormat(item.selectedPrograms)"
          :span-method="spanMethod"
          border
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="spaceName" label="所属空间" />
          <el-table-column prop="styleDesc" label="风格描述" />
          <el-table-column prop="houseType" label="户型">
            <template slot-scope="scope">{{ formaterData(houseTypeOptions, scope.row.houseType) }}</template>
          </el-table-column>

          <el-table-column prop="houseTypePosition" label="户型定位">
            <template slot-scope="scope">{{ formaterData(typePositionOptions, scope.row.houseTypePosition) }}</template>
          </el-table-column>
          <el-table-column prop="adviceSampleArea" label="建议上样面积(㎡)" />
          <el-table-column width="150" show-overflow-tooltip prop="spaceDesc" label="空间说明" />
          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="sampleFunctionSpace" label="上样功能空间">
            <template slot-scope="scope">{{ formaterData(sampleSpaceOptions, scope.row.sampleFunctionSpace) }}</template>
          </el-table-column>
          <el-table-column prop="assortCupboardSeriesName" label="橱柜系列" />
          <el-table-column prop="bathRoomSeriesName" label="卫浴系列" />

          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column width="150" show-overflow-tooltip prop="seriesDesc" label="系列说明" />

          <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 软体 -->
        <el-table
          v-if="item.areatitle==='Q014'"
          show-overflow-tooltip
          :data="handleFormat(item.selectedPrograms)"
          :span-method="spanMethod2"
          border
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="spaceName" label="所属空间" />
          <el-table-column width="150" show-overflow-tooltip prop="spaceDesc" label="空间说明" />
          <!-- <el-table-column prop="enable" label="启用状态" /> -->
          <el-table-column prop="adviceSampleArea" label="建议上样面积" />
          <el-table-column prop="spaceReportArea" label="实际报图面积汇总" />

          <el-table-column prop="styleName" width="120" label="所属专区" />
          <el-table-column prop="adviceArea" label="建议面积" />
          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="actualReportArea" label="实际报图面积(㎡)" min-width="100">
            <template slot="header">
              <span style="color: red">*</span>实际报图面积(㎡)
            </template>
            <!-- <template slot-scope="scope">
              <el-input v-model.number="scope.row.actualReportArea" class="tool-inp" size="mini" placeholder="请输入面积" @input="changeAreaSum" />
            </template> -->
          </el-table-column>
          <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="enable" label="启用状态">
            <template slot-scope="scope">{{ scope.row.enable===1?'启用':'停用' }}</template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 情景间 -->
        <el-table
          v-if="item.areatitle==='Q019'"
          show-overflow-tooltip
          :data="handleFormat(item.selectedPrograms)"
          :span-method="sceneSpanMethod"
          border
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="spaceName" label="所属空间" />
          <el-table-column width="150" show-overflow-tooltip prop="spaceDesc" label="空间说明" />
          <!-- <el-table-column prop="enable" label="启用状态" /> -->
          <el-table-column prop="actualReportArea" label="实际报图面积(㎡)" min-width="100">
            <template slot="header">
              <span style="color: red">*</span>实际报图面积(㎡)
            </template>
          </el-table-column>
          <el-table-column prop="styleName" width="120" label="所属专区" />
          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="sampleFunctionSpace" label="上样功能空间">
            <template slot-scope="scope">{{ formaterData(sampleSpaceOptions,scope.row.sampleFunctionSpace) }}</template>
          </el-table-column>
          <el-table-column width="150" show-overflow-tooltip prop="customizedProductDesc" label="定制产品说明">
            <template slot-scope="scope">{{ scope.row.customizedProductDesc|| scope.row.customProductDesc }}</template>
          </el-table-column>
          <el-table-column prop="assortEndProductDesc" width="150" show-overflow-tooltip label="配套成品说明" />
          <el-table-column prop="referenceArea" label="参考面积" />
          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />

          <!-- <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(index,scope.$index,scope)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <div class="btn-container">
      <!-- <c-permission code="edit"> -->
      <el-button size="mini" type="primary" @click="preStep">上一步</el-button>
      <el-button
        v-if="showSubmit"
        :loading="saveLoading"
        size="mini"
        type="primary"
        @click="handleSubmit('1')"
      >提交</el-button>
      <el-button
        v-if="showSubmitAudit"
        :loading="saveLoading"
        size="mini"
        type="primary"
        @click="handleSubmit('2')"
      >提交审批</el-button>
      <!-- </c-permission>  -->
    </div>
    <submit-dlg
      v-if="submitDlgVisible"
      ref="refDlg"
      :change-id="changeId"
      :submit-comfire-form="submitComfireForm"
      :visible.sync="submitDlgVisible"
      @success="success"
    />

  </div>
</template>
<script>

import submitDlg from '../submitDlg'
import { formaterData, deepClone } from '@/utils'

import programAdd from '../../ShopDesign/programAdd.vue'
import BackPageMixin from '@/mixins/backPage'
import { saveDesignSeriesChange } from '@/api/shopDesignChange'
import { getSeriesDataById, getProgramById } from '@/api/shopDesign'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'DesignChangeNext',
  components: { programAdd, submitDlg },
  mixins: [BackPageMixin],
  props: {
    id: {
      type: String,
      default: ''
    },
    changeCode: {// 设计变更单号
      type: String,
      default: ''
    },
    constCode: {
      type: String,
      default: ''
    },
    changeId: {
      type: String,
      default: ''
    },
    designId: {
      type: String,
      default: ''
    },
    oldProgramId: {
      type: String,
      default: ''
    },
    programId: {// 用于根据方案id筛选软装和成品的所属空间
      type: String,
      default: ''
    },
    areaSpecialZone: {
      type: Array,
      default: () => []
    },
    customerCode: {
      type: String,
      default: ''
    },
    shopTotalArea: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formaterData,
      deepClone,
      submitId: '',
      showSubmit: false,
      showSubmitAudit: false,
      activeNames: [],
      submitDlgVisible: false,
      submitComfireForm: {},
      sampleSpaceOptions: [], // 实际申请上样空间
      applyWayOptions: [], // 适用申请方式
      sampleRecommendLevelOptions: [],
      marketPositionOption: [], // 市场定位
      houseTypeOptions: [],
      typePositionOptions: [],
      activeIndex: 0, // 点击选择方案的区域索引
      selectedPrograms: [], // 区域下所选择的方案详情
      activeZone: '',
      adviceCityLevelOptions: [],
      styleFormOption: [],
      showAddProgram: false,
      zoneLoading: false,
      dialogVisible: false,
      saveLoading: false,
      submitLoading: false,
      tableHandleSelect: [],
      tableSelected: [],
      otherFilters: [],
      programName: '', // 方案名
      areaOptions: [{ dictCode: 'Q002', dictName: '全屋定制' },
        { dictCode: 'Q003', dictName: '整体橱柜' },
        { dictCode: 'Q004', dictName: '卫浴' },
        { dictCode: 'Q005', dictName: '样板间' },
        { dictCode: 'Q014', dictName: '软体' },
        { dictCode: 'Q015', dictName: '套房' },
        { dictCode: 'Q019', dictName: '情景间' }
      ], // 设计专区
      programsZoneOption: [], // 区域下的方案专区
      newAreaSpecialZone: [],

      tableConfig: {
        buttonGroupCode: 'default',
        tabIndex: 0
        // 成品表格字段动态配置
      }
    }
  },
  async created() {
    this.formatAreaSpecialZone()
    this.getShowPermission()// 获取当前按钮权限
    for (let index = 0; index < this.areaSpecialZone.length; index++) {
      this.activeNames.push(index)
    }
    getProgramById(this.changeId, this.oldProgramId).then(res => {
      if (res.success === 1 && res.data) {
        res.data.map(el => {
          el.id = el.configProgramProductSeriesId// 接口返回id不与待选方案id匹配，configProgramSeriesId才是待选方案id
          this.newAreaSpecialZone.map((row, index) => {
            // 全屋定制
            if (row.areatitle === 'Q002' && el.areaCode === 'Q002') {
              // el.actureApplySampleSpace = el.actureApplySampleSpace && el.actureApplySampleSpace.split(',') || []
              this.newAreaSpecialZone[index].selectedPrograms.push(el)
            }
            // 整体橱柜
            if (row.areatitle === 'Q003' && el.areaCode === 'Q003') {
              // el.currentApplyDesignWay = el.currentApplyDesignWay && el.currentApplyDesignWay.split(',') || []
              this.newAreaSpecialZone[index].selectedPrograms.push(el)
            }
            // 卫浴
            if (row.areatitle === 'Q004' && el.areaCode === 'Q004') { this.newAreaSpecialZone[index].selectedPrograms.push(el) }
            // 样板间
            if (row.areatitle === 'Q005' && el.areaCode === 'Q005') this.newAreaSpecialZone[index].selectedPrograms.push(el)
            // 情景间
            if (row.areatitle === 'Q019' && el.areaCode === 'Q019') this.newAreaSpecialZone[index].selectedPrograms.push(el)
            // 软体
            if (row.areatitle === 'Q014' && el.areaCode === 'Q014') {
              this.newAreaSpecialZone[index].selectedPrograms.push(el)
            }
            // 套房
            if (row.areatitle === 'Q015' && el.areaCode === 'Q015') {
              this.newAreaSpecialZone[index].selectedPrograms.push(el)
            }
          })
        })
      }
    })
    const { RECOMMEND_LEVEL, HOUSE_TYPE, HOUSE_TYPE_POSITION, MARKET_POSITION, STYLE_FORM, CITY_LEVEL, SAMPLE_FUNCTION_SPACE, SUIT_DESIGN_WAY, SAMPLE_RECOMMEND_LEVEL } =
    await getDictByPatchType(['RECOMMEND_LEVEL', 'HOUSE_TYPE', 'HOUSE_TYPE_POSITION', 'MARKET_POSITION', 'STYLE_FORM', 'CITY_LEVEL', 'SAMPLE_FUNCTION_SPACE', 'SUIT_DESIGN_WAY', 'SAMPLE_RECOMMEND_LEVEL'])
    this.applyWayOptions = SUIT_DESIGN_WAY
    this.adviceCityLevelOptions = CITY_LEVEL
    this.sampleSpaceOptions = SAMPLE_FUNCTION_SPACE
    this.styleFormOption = STYLE_FORM
    this.marketPositionOption = MARKET_POSITION
    this.houseTypeOptions = HOUSE_TYPE
    this.typePositionOptions = HOUSE_TYPE_POSITION
    this.recommendLevelOptions = RECOMMEND_LEVEL
    this.sampleRecommendLevelOptions = SAMPLE_RECOMMEND_LEVEL
  },
  methods: {
    getShowPermission() {
      if (!this.$route.query.type || this.$route.query.type === '2') { // 提交审批
        this.showSubmitAudit = true
        this.showSubmit = false
      } else if (this.$route.query.type === '1') { // 不提交审批
        this.showSubmitAudit = false
        this.showSubmit = true
      }
    },
    success() {
      this.$store.dispatch('views/goBack')
    },
    handleCloseSubmit() {
      this.submitDlgVisible = false
    },
    handleDelete(index, key, item) {
      // if (item.row.isMustUp === 1) {
      //   this.$message.warning(`此方案为【${item.row.programName}】下的必上，不能删除`)
      //   return
      // }
      this.newAreaSpecialZone[index].selectedPrograms.splice(key, 1)
    },
    formatSubmitPrograms() {
      const select = []
      const unfinishPro = []
      const repeatList = []
      const dataList = JSON.parse(JSON.stringify(this.newAreaSpecialZone))
      dataList.map(el => {
        if (el.areatitle === 'Q002') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('全屋定制')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q002')
            this.$set(row, 'seriesRecommendedLevel', row.seriesRecommendedLevel || row.recommendLevel)
            this.$set(row, 'seriesStandardColor', row.standardColor || row.seriesStandardColor)
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))

            select.forEach(el => {
              if (el.seriesCode && el.seriesCode === row.seriesCode && el.areaCode && el.areaCode === 'Q002') {
                repeatList.push('全屋定制')
                return
              }
            })

            select.push(row)
          })
        }
        if (el.areatitle === 'Q003') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('整体橱柜')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q003')
            this.$set(row, 'seriesRecommendedLevel', row.seriesRecommendedLevel || row.recommendLevel)
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))

            select.forEach(el => {
              if (el.seriesCode && el.seriesCode === row.seriesCode && el.areaCode && el.areaCode === 'Q003') {
                repeatList.push('整体橱柜')
                return
              }
            })
            select.push(row)
          })
        }
        if (el.areatitle === 'Q004') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('卫浴')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q004')
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))

            select.forEach(el => {
              if (el.areaCode === 'Q004' && el.seriesCode && el.seriesCode === row.seriesCode) {
                repeatList.push('卫浴')
                return
              }
            })

            select.push(row)
          })
        }
        if (el.areatitle === 'Q005') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('样板间')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q005')
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))

            // select.forEach(el => {
            //   if (el.seriesCode && el.seriesCode === row.seriesCode && el.areaCode && el.areaCode === 'Q005') {
            //     repeatList.push('样板间')
            //     return
            //   }
            // })

            select.push(row)
          })
        }
        if (el.areatitle === 'Q019') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('情景间')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q019')
            this.$set(row, 'customProductDesc', row.customizedProductDesc || row.customProductDesc)
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))

            select.forEach(el => {
              if (el.seriesCode && (el.styleName === row.styleName && el.seriesCode === row.seriesCode) && el.areaCode && el.areaCode === 'Q019') {
                repeatList.push('情景间')
                return
              }
            })

            select.push(row)
          })
        }
        if (el.areatitle === 'Q014') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('软体')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q014')
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))

            select.forEach(el => {
              if (el.seriesCode && el.seriesCode === row.seriesCode && el.areaCode && el.areaCode === 'Q014') {
                repeatList.push('软体')
                return
              }
            })

            select.push(row)
          })
        }
        if (el.areatitle === 'Q015') {
          if (!el.selectedPrograms || el.selectedPrograms.length === 0) unfinishPro.push('套房')
          el.selectedPrograms.map(row => {
            this.$set(row, 'areaCode', 'Q015')
            this.$set(row, 'configProgramProductSeriesId', row.id)
            this.$set(row, 'doorColorName', (row.doorColorName && (typeof (row.doorColorName) === 'string' ? row.doorColorName : row.doorColorName.join(',')) || ''))
            this.$set(row, 'cabinetColorName', (row.cabinetColorName && (typeof (row.cabinetColorName) === 'string' ? row.cabinetColorName : row.cabinetColorName.join(',')) || ''))
            select.forEach(el => {
              if (el.seriesCode && el.seriesCode && el.seriesCode === row.seriesCode && el.areaCode && el.areaCode === 'Q015') {
                repeatList.push('套房')
                return
              }
            })

            select.push(row)
          })
        }
      })

      if (unfinishPro.length > 0) {
        this.$message.warning(`【${Array.from(new Set(unfinishPro)).toString()}】区域下未选择方案，请完善！`)
        return false
      }

      if (repeatList.length > 0) {
        this.$message.warning(`【${Array.from(new Set(repeatList)).toString()}】区域下存在重复系列/风格，请删除多余项！`)
        return false
      }
      if (unfinishPro.length === 0 && repeatList.length === 0) return select
    },
    handleSelectionChange() {

    },
    format(data) {
      const tempArr = this.areaOptions.filter(el => el.dictCode === data)
      if (tempArr.length > 0) return tempArr[0].dictName
    },
    getAreaData(data) {
      if (data === 'Q002') return this.shopTotalArea.wholeHouseCustomizedArea
      if (data === 'Q003') return this.shopTotalArea.wholeCabinetArea
      if (data === 'Q004') return this.shopTotalArea.bathroomArea
      if (data === 'Q005') return this.shopTotalArea.sampleRoomArea
      if (data === 'Q014') return this.shopTotalArea.softwareArea
      if (data === 'Q015') return this.shopTotalArea.suiteArea
      if (data === 'Q019') return this.shopTotalArea.sceneArea
    },
    selectPrograms(data) {
      this.newAreaSpecialZone[this.activeIndex].selectedPrograms = data.map(v => {
        return {
          ...v, doorColorName: typeof v.doorColorName === 'object' ? v.doorColorName.join(',') : v.doorColorName, cabinetColorName: typeof v.cabinetColorName === 'object' ? v.cabinetColorName.join(',') : v.cabinetColorName
        }
      })
    },
    formatAreaSpecialZone() {
      this.areaSpecialZone.map(el => this.newAreaSpecialZone.push({ areatitle: el, selectedPrograms: [] }))
    },
    selectionChangeHandle(data) {
      this.tableHandleSelect = data
      this.tableHandleSelect.forEach(el => this.$set(el, 'programName', this.programName))
    },
    handleClose() {
      this.dialogVisible = false
      this.$set(this, 'programsZoneOption', [])
    // this.programsZoneOption = []
    },
    async showSelectProgram(data, index, item) {
      this.selectedPrograms = data.selectedPrograms
      this.activeIndex = index
      this.activeZone = data.areatitle
      this.showAddProgram = true
      this.zoneLoading = true
    },
    handleChange(val) {
    },
    // 处理空间数据
    handleFormat(data) {
      const t = {}
      for (const item of data) {
        const key = item.spaceCode
        if (t[key] === undefined) {
          t[key] = []
        }
        // 设置默认值
        item.adviceSampleArea ? '' : item.adviceSampleArea = 0
        item.actualReportArea ? '' : item.actualReportArea = 0
        t[key].push(item)
      }
      // 按照空间合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.spaceCode || item.spaceName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照空间合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            // e.group = v
            result.push(e)
          })
        }
      }
      return result
    },

    spanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if (columnIndex >= 2 && columnIndex <= 4) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },

    spanMethod3({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if (columnIndex >= 2 && columnIndex <= 5) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    bathRoomSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if (columnIndex >= 2 && columnIndex <= 5) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if (columnIndex >= 2 && columnIndex <= 6) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    sceneSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if (columnIndex >= 2 && columnIndex <= 3) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    handleChangeDlg(val, index) {
      getSeriesDataById(val).then(res => {
        if (res.success === 1) {
        // this.$set(this.tableConfig, 'setting', this.setProduct)
          this.$set(this.programsZoneOption[index], 'seriesData', res.data.configProgramSeriesDTOS)
        }
      })
    },
    preStep() {
      this.$emit('changeStep', { activeStep: 0 })
    },
    // 提交所选方案
    async  handleSubmit(flag) {
      const result = this.formatSubmitPrograms()
      if (!result) return
      // 1.保存
      this.saveLoading = true
      const data = {
        designChangeAreaSeriesDTOList: result,
        id: this.changeId,
        constCode: this.constCode,
        changeCode: this.changeCode
      }
      console.log(result)
      // data.designChangeAreaSeriesDTOList.forEach(v => {
      //   if (v.areaCode === 'Q003') {
      //     v.currentApplyDesignWay = this.deepClone(v.currentApplyDesignWay).toString() || ''
      //   }
      //   if (v.areaCode === 'Q002') {
      //     v.actureApplySampleSpace = this.deepClone(v.actureApplySampleSpace).toString() || ''
      //   }
      // })

      saveDesignSeriesChange(data).then(res => {
        if (res.success === 1) {
          // 显示确认单
          this.saveLoading = false
          this.submitComfireForm = data
          this.$set(this.submitComfireForm, 'type', flag)
          this.submitDlgVisible = true
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  .btn-container{
    width: 300px;
    margin: auto;
}
/deep/.el-dialog__body {
  height: 400px;
  overflow: scroll;
}
</style>
